<?php 
    $this->headLink()
    ;
?>

<?php 
   $this->headScript() 
    ;
?>

<?php $this->headScript()->captureStart() ?>
$(document).ready(function() {
    jQuery(function() {
        var options2 = { 
            type:"POST",
            dataType : "text",
            buttons:$('#videoForm').find("button[name='button']"),
            async : true,
            cache: false,
            success:function(responseText, statusText)
            {
                //alert(responseText);
                var json = jQuery.parseJSON(responseText);
                if(json.result != 1){
                    dialogMessage(json.messages);
                    return false;
                }
                $('#attachments').prepend($('#template-show-video').tmpl(json.data));
                return true;
            },
        };
        var v2 = jQuery("#videoForm").validate({
            debug: true,
            messages: {
                videoUrl: {
                    required: "<?php echo $this->translate("Please enter the video url.");?>",
                    url: "<?php echo $this->translate("Please enter right video url.");?>",
                },
            },
            rules: {
                videoUrl: {
                    required: true,
                    url: true
                }
            },
            errorPlacement: function(error, element) { 
                var elementName = element.attr("name");
                var idTip = 'tip-' + elementName + '';
                $("#" + idTip).html(error);
            },
            invalidHandler: function(form, validator) {
                var message = joiner = "";
                $.each(validator.invalid,function(key,value){
                    message += joiner + value;
                    joiner = "<br />";
                });
               // dialogMessage(message);
            },
            success: function(label) {
                label.addClass("valid").text("Ok!")
            },
            submitHandler: function(form) {
                jQuery(form).ajaxSubmit(options2);
            }
        });
    
        var optionsShopping = { 
            type:"POST",
            dataType : "text",
            buttons:$('#shoppingForm').find("button[name='button']"),
            async : true,
            cache: false,
            success:function(responseText, statusText)
            {
                //alert(responseText);
                var json = jQuery.parseJSON(responseText);
                if(json.result != 1){
                    dialogMessage(json.messages);
                    return false;
                }
                
                var $content = json.content;
                $('#attachments').prepend($content);
                return true;
            },
        };
        var v2 = jQuery("#shoppingForm").validate({
            debug: true,
            messages: {
                shoppingUrl: {
                    required: "<?php echo $this->translate("Please enter the shopping url.");?>",
                    url: "<?php echo $this->translate("Please enter right shopping url.");?>",
                },
            },
            rules: {
                shoppingUrl: {
                    required: true,
                    url: true
                }
            },
            errorPlacement: function(error, element) { 
                var elementName = element.attr("name");
                var idTip = 'tip-' + elementName + '';
                $("#" + idTip).html(error);
            },
            invalidHandler: function(form, validator) {
                var message = joiner = "";
                $.each(validator.invalid,function(key,value){
                    message += joiner + value;
                    joiner = "<br />";
                });
               // dialogMessage(message);
            },
            success: function(label) {
                label.addClass("valid").text("Ok!")
            },
            submitHandler: function(form) {
                jQuery(form).ajaxSubmit(optionsShopping);
            }
        });
        
        var options3 = { 
            type:"POST",
            dataType : "text",
            buttons:$('#musicForm').find("button[name='button']"),
            async : true,
            cache: false,
            global:true,
            success:function(responseText, statusText)
            {
                var json = jQuery.parseJSON(responseText);
                if(json.result != 1){
                    dialogMessage(json.messages);
                    return false;
                }
                
                $('#attachments').prepend($('#template-show-music').tmpl(json.data));
                return true;
            },
        };
        var v3 = jQuery("#musicForm").validate({
            debug: true,
            messages: {
                musicUrl: {
                    required: "<?php echo $this->translate("Please enter the music url.");?>",
                    url: "<?php echo $this->translate("Please enter right music url.");?>",
                },
            },
            rules: {
                musicUrl: {
                    required: true,
                    url: true
                }
            },
            errorPlacement: function(error, element) {
                var elementName = element.attr("name");
                var idTip = 'tip-' + elementName + '';
                $("#" + idTip).html(error);
            },
            invalidHandler: function(form, validator) {
                var message = joiner = "";
                $.each(validator.invalid,function(key,value){
                    message += joiner + value;
                    joiner = "<br />";
                });
                //dialogMessage(message);
            },
            success: function(label) {
                label.addClass("valid").text("Ok!")
            },
            submitHandler: function(form) {
                jQuery(form).ajaxSubmit(options3);
            }
        });
    
    });

    $('#tabs').tabs({ cookie: { expires: 3650000000 }});
    $('#tabs').bind( "tabsshow", function(event, ui) {

    });
    

    $('#uploadForm').ajaxForm({
        beforeSubmit: function(a,f,o) {
            o.dataType = 'xml';
        },
        success: function(responseXML) {
            var $result = $('result', responseXML).text().trim();
            if($result != 1){
                var $messages = $('messages', responseXML).text().trim();
                dialogMessage($messages);
                return false;
            }
            
            var $content = $(responseXML).find("content").text().trim();
            $('#attachments').prepend($content);
            return true;
        }
    });        
    
});
<?php $this->headScript()->captureEnd() ?>

<dt><?php echo $this->translate("Add attachment");?></dt>
<dd>
    <div id="tabs">
        <ul>
            <?php if($this->settings['allowUploadImage']):?>
            <li><a href="#tabs-1"><?php echo $this->translate("Photo");?></a></li>
            <?php endif;?>
            
            <?php if($this->settings['allowShareVideo']):?>
            <li><a href="#tabs-2"><?php echo $this->translate("Video");?></a></li>
            <?php endif;?>
            
            <?php if($this->settings['allowShareMusic']):?>
            <li><a href="#tabs-3"><?php echo $this->translate("Music");?></a></li>
            <?php endif;?>
            
            <?php if($this->settings['allowShareShopping']):?>
            <li><a href="#tabs-4"><?php echo $this->translate("Shopping");?></a></li>
            <?php endif;?>
        </ul>
        <?php if($this->settings['allowUploadImage']):?>
        <div id="tabs-1">
            <div class="clearfix">
                <form id="uploadForm" enctype="multipart/form-data" method="post" action="<?php echo $this->url(array('module'=>'publish', 'controller'=>'attachment', 'action'=>'save-image'),'default',true) ?>">
                <input type="hidden" name="articleId" value="<?php echo $this->articleId;?>" />
                <div class="clearfix">
                    <input type="file" name="file"  class="ui-corner-all required" /><input type="submit" value="<?php echo $this->translate("Upload");?>" class="ui-corner-all" />
                </div>
                <div id="tip-file"><?php echo $this->translate("Please select a photo.");?></div>
                </form>
            </div>
        </div>
        <?php endif;?>
        <?php if($this->settings['allowShareVideo']):?>
        <div id="tabs-2">
            <form method="post" name="videoForm" id="videoForm" action="<?php echo $this->url(array('module'=>'publish', 'controller'=>'attachment', 'action'=>'save-video'),'default',true) ?>">
            <input type="hidden" name="articleId" value="<?php echo $this->articleId;?>" />
            <div class="clearfix">
            <?php if(is_array($this->allowVideoHosts)):?>
                <?php foreach($this->allowVideoHosts as $key=>$host){?>
                <a href="<?php echo $host['url'];?>" target="_blank"><?php echo $host['name'];?></a>
                <?php }?>
            <?php endif;?>
            </div>
            <div class="clearfix">
                <input id="videoUrl" type="text" name="videoUrl"  class="ui-corner-all required" /><input type="submit" name="submit" id="buttonVideo" value="<?php echo $this->translate("Submit");?>" class="ui-corner-all" />
            </div>
            <div id="tip-videoUrl"><?php echo $this->translate("Please enter the video url.");?></div>
            </form>
        </div>
        <?php endif;?>
        <?php if($this->settings['allowShareMusic']):?>
        <div id="tabs-3" class="clearfix">
            <form method="post" name="musicForm" id="musicForm" action="<?php echo $this->url(array('module'=>'publish', 'controller'=>'attachment', 'action'=>'save-music'),'default',true) ?>">
            <input type="hidden" name="articleId" value="<?php echo $this->articleId;?>" />
            <div class="clearfix">
            <?php if(is_array($this->allowMusicHosts)):?>
                <?php foreach($this->allowMusicHosts as $key=>$host){?>
                <a href="<?php echo $host['url'];?>" target="_blank"><?php echo $host['name'];?></a>
                <?php }?>
            <?php endif;?>
            </div>
            <div class="clearfix"><input id="musicUrl" type="text" name="musicUrl"  class="ui-corner-all required" /><input type="submit" name="submit" id="buttonVideo" value="<?php echo $this->translate("Submit");?>" class="ui-corner-all" />
            </div>
            <div id="tip-musicUrl"><?php echo $this->translate("Please enter the music url.");?></div>
            </form>
        </div>
        <?php endif;?>
        <?php if($this->settings['allowShareShopping']):?>
        <div id="tabs-4" class="clearfix">
            <form method="post" name="shoppingForm" id="shoppingForm" action="<?php echo $this->url(array('module'=>'publish', 'controller'=>'attachment', 'action'=>'save-shopping'),'default',true) ?>">
            <input type="hidden" name="articleId" value="<?php echo $this->articleId;?>" />
            <div class="clearfix">
            <?php if(is_array($this->allowShoppingHosts)):?>
                <?php foreach($this->allowShoppingHosts as $key=>$host){?>
                <a href="<?php echo $host['url'];?>" target="_blank"><?php echo $host['name'];?></a>
                <?php }?>
            <?php endif;?>
            </div>
            <div class="clearfix"><input id="shoppingUrl" type="text" name="shoppingUrl"  class="ui-corner-all required" /><input type="submit" name="submit" id="buttonShopping" value="<?php echo $this->translate("Submit");?>" class="ui-corner-all" />
            </div>
            <div id="tip-shoppingUrl"><?php echo $this->translate("Please enter the shopping url.");?></div>
            </form>
        </div>
        <?php endif;?>
    </div>
</dd>

<script id="template-show-image" type="text/x-jquery-tmpl">
    <li class="attachment clearfix ui-corner-all">
        <div class="move">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        </div>
        <div class="body">
            <div class="misc clearfix"><span class="name"><?php echo $this->translate('Image');?></span><span class="delete"><?php echo $this->translate('Delete');?></span></div>
            <div class="image">
                <div class="photo"><a href="${photo.big}" rel="gallery"><div><img src="${photo.thumb}" /><em></em></div></a></div>
                <div class="title">
                    <?php echo $this->translate('Image name');?>: <input type="text" name="image[${attachmentImageId}][title]" value="${title}" class="ui-corner-all" />
                </div>
                <div class="description">
                    <textarea name="image[${attachmentImageId}][description]" class="ui-corner-all">${description}</textarea>
                </div>
            </div>
            <input type="hidden" name="attachment" value="image_${attachmentImageId}" />
        </div>
    </li>
</script>

<script id="template-show-video" type="text/x-jquery-tmpl">
    <li class="attachment clearfix ui-corner-all">
        <div class="move">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        </div>
        <div class="body">
            <div class="misc clearfix">
                <span class="typeName"><?php echo $this->translate('Video');?></span>
                <span class="comeFrom">(<?php echo $this->translate('Come from');?> ${video.siteName}: <a href="${video.siteViewUrl}" target="_blank">${title}</a>)</span>
                <span class="delete"><?php echo $this->translate('Delete');?></span>
            </div>
            <div class="video">
                <div class="photo">
                    <a data-href="${video.flash}" rel="player" title="${title}"><div><img src="${video.photo.thumb}" /><em></em></div></a>
                </div>
                <div class="title">
                    <?php echo $this->translate('Video name');?>: <input type="text" name="video[${attachmentVideoId}][title]" value="${title}" class="ui-corner-all" />
                </div>
                <div class="description"><textarea name="video[${attachmentVideoId}][description]" class="ui-corner-all">${description}</textarea></div>
                <input type="hidden" name="attachment" value="video_${attachmentVideoId}" />
            </div>
        </div>
    </li>
</script>

<script id="template-show-music" type="text/x-jquery-tmpl">
        <li class="attachment clearfix ui-corner-all">
        <div class="move">
            <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        </div>
        <div class="body">
            <div class="misc clearfix">
                <span class="typeName"><?php echo $this->translate('Music');?></span>
                <span class="comeFrom">(<?php echo $this->translate('Come from');?> ${music.siteName}: <a href="${music.siteViewUrl}" target="_blank">${title}</a>)</span>
                <span class="delete"><?php echo $this->translate('Delete');?></span>
            </div>
            <div class="music">
                <div class="photo"><a data-href="${music.flash}" rel="player" title="${title}"><div><img src="${music.photo.thumb}" /><em></em></div></a></div>
                <div class="title">
                    <span class="musicName"><?php echo $this->translate('Music name');?>: <input type="text" name="music[${attachmentMusicId}][name]" value="${name}" class="ui-corner-all" /></span>
                    <span class="singer"><?php echo $this->translate('Singer');?>: <input type="text" name="music[${attachmentMusicId}][singer]" value="${singer}" class="ui-corner-all" /></span>
                </div>
                <div class="description"><textarea name="music[${attachmentMusicId}][description]" class="ui-corner-all">${description}</textarea></div>
                <input type="hidden" name="attachment" value="music_${attachmentMusicId}" />
            </div>
        </div>
    </li>
</script>

